<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.nostyle{
		background :red;
	}
</style>
<script type="text/javascript" src="${ pageContext.request.contextPath }/res/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath }/res/js/template-web.js"></script>
<script type="text/javascript">
	$(function(){
		var json = {'list':[
			{'name' : '张三1','age' : 22,'sex' : '男'},
			{'name' : '张三2','age' : 22,'sex' : '男'},
			{'name' : '张三3','age' : 22,'sex' : '男'}
		]}

		// 将数据渲染进指定模板-test_content为模板id
		var text = template('test_content',json);
		$('#real_content').html(text);
	})
</script>
</head>
<body>
	<div id="real_content"></div>
	<!-- 渲染模板 -->
	<script type="text/html" id="test_content">
		<ul class="nostyle">
			{{ each list as value i}}
				<li>{{ value.name }},{{ value.age}},{{ value.sex }}</li>
				{{if value.age >18 }}
					<div>成年人</div>
				{{/if}}
			{{ /each }}
		</ul>      
		
	</script>
	
</body>
</html>